// 1 导入相关包
// import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 条件渲染
// 1 要有条件
let isLoading = false;
// 2 要有 UI
let loading = <div>数据加载中</div>;
let result = <div>我是http请求返回的数据</div>;

// 使用三元表达式
// const jsxElem = <div>根据条件渲染对应的UI：{isLoading ? loading : result}</div>;
// 使用函数
// let fn = () => {
//   if (isLoading) {
//     return loading;
//   } else {
//     return result;
//   }
// };
// const jsxElem = <div>根据条件渲染对应的UI：{fn()}</div>;

// 使用 逻辑 && 运算符
const jsxElem = <div>根据条件渲染对应的UI：{isLoading && loading}</div>;
// const jsxElem = <div>根据条件渲染对应的UI：{isLoading && result}</div>;
// 渲染
root.render(jsxElem);
